<template>
  <div id="home-contaner">
    <van-nav-bar title="黑马头条" fixed/>
    <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
    <ArticleInfo v-for="item in artlist" :key="item.id"
    :title="item.title"
    :author="item.aut_name"
    :cmt-count="item.comm_count"
    :time="item.pubdate"
    :cover="item.cover"></ArticleInfo>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListAPI } from '@/api/articleAPI.js'
import ArticleInfo from '@/components/AriticleInfo.vue'
export default {
  name: 'Home',
  data () {
    return {
      page: 1,
      limit: 10,
      artlist: [],
      loading: true,
      finished: false,
      refreshLoading: false
    }
  },
  created () {
    this.initArticleList()
  },
  methods: {
    async initArticleList (isRefresh) {
      const { data: res } = await getArticleListAPI(this.page, this.limit)
      // console.log(res)
      if (isRefresh) {
        this.artlist = [...res, ...this.artlist]
        console.log(this.artlist)
        this.refreshLoading = false
      } else {
        this.artlist = [...this.artlist, ...res]
        console.log(this.artlist)
        this.loading = false
      }
      // console.log(this.artlist[0].art_id)
      if (res.length === 0) {
        this.finished = true
      }
    },
    onLoad () {
      console.log('触发了load事件')
      this.page++
      console.log(this.page)
      this.initArticleList()
    },
    onRefresh () {
      console.log('触发了Refresh事件')
      this.page++
      this.initArticleList(true)
    }
  },
  components: {
    ArticleInfo
  }
}
</script>

<style lang="less" scoped>
#home-contaner{
  padding: 46px 0 50px 0
  }
</style>
